<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            perspective: 800px;
        }
        
        .box {
            width: 250px;
            height: 250px;
            margin: 200px auto;
            position: relative;
            transform-style: preserve-3d;
            animation-name: text;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        
        .box:active {
            animation-play-state: paused;
        }
        
        .box1 {
            width: 100px;
            height: 50px;
            position: relative;
            top: 100px;
            left: 75px;
            transform-style: preserve-3d;
        }
        
        .box1:active {
            animation-play-state: paused;
        }
        
        .box:hover .box1 {
            animation-name: text1;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        
        .box2 {
            width: 50px;
            height: 50px;
            position: relative;
            left: 25px;
            transform-style: preserve-3d;
        }
        
        .box2:active {
            animation-play-state: paused;
        }
        
        .box:hover .box2 {
            animation-name: text2;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        
        .box3 img,
        .box4 img,
        .box5 img,
        .box6 img,
        .box7 img,
        .box8 img {
            width: 50px;
            height: 50px;
            opacity: 0.7;
            vertical-align: top;
        }
        
        .box3 {
            position: absolute;
            transform: rotateY(90deg) translateZ(25px);
        }
        
        .box4 {
            position: absolute;
            transform: rotateY(-90deg) translateZ(25px);
        }
        
        .box5 {
            position: absolute;
            transform: rotateX(90deg) translateZ(25px);
        }
        
        .box6 {
            position: absolute;
            transform: rotateX(-90deg) translateZ(25px);
        }
        
        .box7 {
            position: absolute;
            transform: rotateY(180deg) translateZ(25px);
        }
        
        .box8 {
            position: absolute;
            transform: rotateY(0deg) translateZ(25px);
        }
        
        .box9 img,
        .box10 img,
        .box11 img,
        .box12 img,
        .box13 img,
        .box14 img {
            width: 100px;
            height: 50px;
            opacity: 0.7;
            vertical-align: top;
        }
        
        .box9 {
            position: absolute;
            top: 0px;
            transform: rotateY(0deg) translateZ(100px);
        }
        
        .box10 {
            position: absolute;
            top: 0px;
            transform: rotateY(60deg) translateZ(100px);
        }
        
        .box11 {
            position: absolute;
            top: 0px;
            transform: rotateY(120deg) translateZ(100px);
        }
        
        .box12 {
            position: absolute;
            top: 0px;
            transform: rotateY(180deg) translateZ(100px);
        }
        
        .box13 {
            position: absolute;
            top: 0px;
            transform: rotateY(240deg) translateZ(100px);
        }
        
        .box14 {
            position: absolute;
            top: 0px;
            transform: rotateY(300deg) translateZ(100px);
        }
        
        .box15 img,
        .box16 img,
        .box17 img,
        .box18 img,
        .box19 img,
        .box20 img {
            width: 250px;
            height: 250px;
            vertical-align: top;
        }
        
        .box15 {
            position: absolute;
            top: 0px;
            transform: rotateY(90deg) translateZ(125px);
        }
        
        .box16 {
            position: absolute;
            top: 0px;
            transform: rotateY(-90deg) translateZ(125px);
        }
        
        .box17 {
            position: absolute;
            top: 0px;
            transform: rotateX(90deg) translateZ(125px);
        }
        
        .box18 {
            position: absolute;
            top: 0px;
            transform: rotateX(-90deg) translateZ(125px);
        }
        
        .box19 {
            position: absolute;
            top: 0px;
            transform: rotateY(180deg) translateZ(125px);
        }
        
        .box20 {
            position: absolute;
            top: 0px;
            transform: rotateY(0deg) translateZ(125px);
        }
        
        .box:hover .box15 {
            transform: rotateY(90deg) translateZ(300px);
            transition: all 2s;
        }
        
        .box:hover .box16 {
            transform: rotateY(-90deg) translateZ(300px);
            transition: all 2s;
        }
        
        .box:hover .box17 {
            transform: rotateX(90deg) translateZ(300px);
            transition: all 2s;
        }
        
        .box:hover .box18 {
            transform: rotateX(-90deg) translateZ(300px);
            transition: all 2s;
        }
        
        .box:hover .box19 {
            transform: rotateY(180deg) translateZ(300px);
            transition: all 2s;
        }
        
        .box:hover .box20 {
            transform: rotateY(0deg) translateZ(300px);
            transition: all 2s;
        }
        
        @keyframes text {
            0% {
                transform: rotateX(0deg) rotateZ(0deg);
            }
            100% {
                transform: rotateX(360deg) rotateZ(360deg);
            }
        }
        
        @keyframes text1 {
            0% {
                transform: rotateY(0deg);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        
        @keyframes text2 {
            100% {
                transform: rotateX(0deg) rotateZ(0deg);
            }
            0% {
                transform: rotateX(360deg) rotateZ(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">
            <div class="box2">
                <div class="box3"><img src="./图1.jpg"></div>
                <div class="box4"><img src="./图2.jpg"></div>
                <div class="box5"><img src="./图3.jpg"></div>
                <div class="box6"><img src="./图4.jpg"></div>
                <div class="box7"><img src="./图5.jpg"></div>
                <div class="box8"><img src="./图6.jpg"></div>
            </div>
            <div class="box9"><img src="./图2.1.jpg"></div>
            <div class="box10"><img src="./图2.2.jpg"></div>
            <div class="box11"><img src="./图2.3.jpg"></div>
            <div class="box12"><img src="./图2.4.jpg"></div>
            <div class="box13"><img src="./图2.5.jpg"></div>
            <div class="box14"><img src="./图2.6.jpg"></div>
        </div>
        <div class="box15"><img src="./图3.1.jpg"></div>
        <div class="box16"><img src="./图3.2.jpg"></div>
        <div class="box17"><img src="./图3.3.jpg"></div>
        <div class="box18"><img src="./图3.4.jpg"></div>
        <div class="box19"><img src="./图3.5.jpg"></div>
        <div class="box20"><img src="./图3.6.jpg"></div>
    </div>
</body>

</html>